Lazy Loading: Görseller ve Bileşenlerle Web Performansını Optimize Etme

Günümüz dijital dünyasında web sitesi performansı her şeyden önemlidir. Kullanıcılar hızlı, duyarlı deneyimler bekler ve arama motorları bu deneyimi sunan web sitelerine öncelik verir. Performansı artırmak için en önemli tekniklerden biri lazy loading'dir. Bu makale, görsellerin ve bileşenlerin yavaş yüklenmesine yönelik kapsamlı bir rehber sunarak web sitenizi küresel bir kitle için optimize etmenize yardımcı olur.

Lazy Loading Nedir?

Lazy loading, kaynakların (görseller, iframe'ler, bileşenler vb.) gerçekten ihtiyaç duyulana kadar, yani genellikle görüntü alanına girmek üzereyken yüklenmesini erteleyen bir tekniktir. Bu, tüm varlıkları başlangıçta yüklemek yerine, tarayıcının yalnızca ilk sayfa yüklemesinde kullanıcı tarafından görülebilen kaynakları yüklediği anlamına gelir. Kullanıcı sayfayı aşağı kaydırdıkça, daha fazla kaynak görünür hale geldikçe yüklenir.

Şöyle düşünün: Bir seyahat için bavul hazırladığınızı hayal edin. Tüm gardırobunuzu baştan yanınızda sürüklemek yerine, yalnızca hemen ihtiyacınız olacağını bildiğiniz kıyafetleri paketlersiniz. Yolculuğunuzda ilerledikçe, ihtiyaç duyduğunuz ek eşyaları çıkarırsınız. Lazy loading'in web siteleri için çalışma şekli esasen budur.

Neden Lazy Loading Kullanılmalı?

Lazy loading birçok önemli avantaj sunar:

• İyileştirilmiş İlk Sayfa Yükleme Süresi: Ekran dışı kaynakların yüklenmesini erteleyerek, tarayıcı kullanıcının hemen görebildiği içeriği yüklemeye odaklanabilir. Bu, daha hızlı bir ilk sayfa yükleme süresine yol açar, kullanıcının ilk izlenimini iyileştirir ve hemen çıkma oranlarını düşürür.
• Azaltılmış Bant Genişliği Tüketimi: Kullanıcılar yalnızca gerçekten gördükleri kaynakları indirir, bu da özellikle mobil cihazlarda veya sınırlı veri planlarına sahip kullanıcılar için bant genişliği tüketimini azaltır. Bu, daha yavaş internet hızlarına veya pahalı verilere sahip bölgelerdeki kullanıcılar için özellikle önemlidir.
• Daha Düşük Sunucu Yükü: Daha az başlangıç isteği sunarak sunucu daha düşük bir yükle karşılaşır, bu da genel web sitesi performansını ve ölçeklenebilirliğini artırabilir.
• Daha İyi Kullanıcı Deneyimi: Daha hızlı bir web sitesi, daha iyi bir kullanıcı deneyimi sunar ve bu da artan etkileşim, dönüşüm ve müşteri memnuniyetine yol açar.
• İyileştirilmiş SEO: Google gibi arama motorları, sayfa yükleme hızını bir sıralama faktörü olarak kabul eder. Lazy loading, web sitenizin SEO performansını artırmanıza yardımcı olabilir.

Görselleri Yavaş Yükleme (Lazy Loading)

Görseller genellikle bir web sitesindeki en büyük varlıklardır, bu da onları lazy loading için birincil adaylar yapar. İşte görseller için lazy loading'i nasıl uygulayacağınız:

Yerel (Native) Lazy Loading

Modern tarayıcılar (Chrome, Firefox, Safari ve Edge) artık loading niteliğini kullanarak yerel lazy loading'i desteklemektedir. Bu, görselleri yavaş yüklemenin en basit ve en verimli yoludur.

Yerel lazy loading'i etkinleştirmek için <img> etiketinize loading="lazy" niteliğini eklemeniz yeterlidir:

            <img src="image.jpg" alt="Resmim" loading="lazy">
            

              
                Copy
              
            
          

loading niteliği üç değere sahip olabilir:

• lazy: Görselin görüntü alanına girmek üzere olana kadar yüklenmesini erteleyin.
• eager: Görseli, sayfadaki konumuna bakılmaksızın hemen yükleyin. (Bu, nitelik mevcut olmadığında varsayılan davranıştır.)
• auto: Görselin yavaş yüklenip yüklenmeyeceğine tarayıcının karar vermesine izin verin.

Örnek:

            <img src="london_bridge.jpg" alt="Londra Köprüsü" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Silüeti" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">
            

              
                Copy
              
            
          

Bu örnekte, Londra Köprüsü, Tokyo Silüeti ve Rio de Janeiro'nun görselleri yalnızca kullanıcı onlara doğru kaydırdığında yüklenecektir. Bu, özellikle bir kullanıcı sayfanın en altına kadar kaydırmazsa son derece yardımcı olur.

JavaScript ile Lazy Loading

Yerel lazy loading'i desteklemeyen eski tarayıcılar için JavaScript kütüphaneleri kullanabilir veya kendi özel betiğinizi yazabilirsiniz. İşte Intersection Observer API'sini kullanarak temel bir örnek:

            const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});
            

              
                Copy
              
            
          

Açıklama:

1. data-src niteliğine sahip tüm <img> öğelerini seçiyoruz.
2. Yeni bir IntersectionObserver örneği oluşturuyoruz. Geri arama işlevi, gözlemlenen bir öğe görüntü alanına girdiğinde veya çıktığında yürütülür.
3. Geri arama işlevinin içinde, entries (görüntü alanıyla kesişen öğeler) üzerinde yineliyoruz.
4. Bir öğe kesişiyorsa (entry.isIntersecting doğruysa), görselin src niteliğini data-src niteliğinin değerine ayarlıyoruz.
5. Ardından data-src niteliğini kaldırıyoruz ve artık ihtiyaç duyulmadığı için görseli gözlemlemeyi bırakıyoruz.
6. Son olarak, observer.observe(img) kullanarak her bir görseli gözlemliyoruz.

HTML Yapısı:

            <img data-src="image.jpg" alt="Resmim">
            

              
                Copy
              
            
          

Gerçek görsel URL'sinin src niteliği yerine data-src niteliğine yerleştirildiğine dikkat edin. Bu, tarayıcının görseli hemen yüklemesini engeller.

Lazy Loading Kütüphanelerini Kullanma

Çeşitli JavaScript kütüphaneleri, görsellerin yavaş yüklenmesi sürecini basitleştirebilir. Bazı popüler seçenekler şunlardır:

• Lozad.js: Hafif ve bağımlılıksız bir lazy loading kütüphanesi.
• yall.js: Yet Another Lazy Loader (Bir Başka Yavaş Yükleyici). Intersection Observer kullanan modern bir lazy loading kütüphanesi.
• React Lazy Load: Görselleri ve diğer bileşenleri yavaş yüklemek için bir React bileşeni.

Bu kütüphaneler genellikle lazy loading'i başlatmak için basit bir API sağlar ve yer tutucu görseller ve geçiş efektleri gibi ek özellikler sunar.

Bileşenleri Yavaş Yükleme (Lazy Loading)

Lazy loading sadece görseller için değildir; özellikle React, Angular ve Vue gibi modern JavaScript framework'lerinde bileşenlere de uygulanabilir. Bu, birçok bileşene sahip büyük tek sayfa uygulamaları (SPA) için özellikle kullanışlıdır.

React'te Lazy Loading

React, bileşenleri yavaş yüklemek için yerleşik bir React.lazy() işlevi sunar. Bu işlev, bileşenleri dinamik olarak içe aktarmanıza olanak tanır ve bu bileşenler yalnızca render edildiklerinde yüklenir.

            import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Yükleniyor...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

Açıklama:

1. MyComponent'i dinamik olarak içe aktarmak için React.lazy() kullanıyoruz. import() işlevi, bileşen modülüne çözümlenen bir promise döndürür.
2. MyComponent'i bir <Suspense> bileşeni içine sarıyoruz. Suspense bileşeni, bileşen yüklenirken bir yedek kullanıcı arayüzü (bu durumda, "Yükleniyor...") görüntülemenizi sağlar.

Angular'da Lazy Loading

Angular, yönlendirme yapılandırmasındaki loadChildren özelliğini kullanarak modüllerin yavaş yüklenmesini destekler.

            const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];
            

              
                Copy
              
            
          

Açıklama:

1. my-module yolu için bir rota tanımlıyoruz.
2. MyModuleModule'ün yavaş yüklenmesi gerektiğini belirtmek için loadChildren özelliğini kullanıyoruz. import() işlevi modülü dinamik olarak içe aktarır.
3. then() metodu, modüle erişmek ve MyModuleModule sınıfını döndürmek için kullanılır.

Vue.js'de Lazy Loading

Vue.js, dinamik içe aktarmalar ve component etiketini kullanarak bileşenlerin yavaş yüklenmesini destekler.

            <template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>
            

              
                Copy
              
            
          

Açıklama:

1. Bir bileşeni dinamik olarak render etmek için :is niteliğine sahip <component> etiketini kullanıyoruz.
2. mounted yaşam döngüsü kancasında, MyComponent.vue'yu dinamik olarak içe aktarmak için import() işlevini kullanıyoruz.
3. Ardından dynamicComponent veri özelliğini modülün varsayılan dışa aktarımına ayarlıyoruz.

Lazy Loading için En İyi Uygulamalar

Lazy loading'in etkili bir şekilde uygulandığından emin olmak için bu en iyi uygulamaları göz önünde bulundurun:

• Mümkün Olduğunda Yerel Lazy Loading Kullanın: Modern tarayıcıları hedefliyorsanız, görseller ve iframe'ler için yerel loading niteliğini kullanın.
• Doğru Kütüphaneyi Seçin: Eski tarayıcıları desteklemeniz veya ek özelliklere ihtiyaç duymanız gerekiyorsa, iyi korunmuş ve hafif bir lazy loading kütüphanesi seçin.
• Yer Tutucular Kullanın: Kaynaklar yüklenirken içeriğin kaymasını önlemek için yer tutucu görseller veya kullanıcı arayüzü öğeleri sağlayın. Bu, kullanıcı deneyimini iyileştirir ve düzen kararsızlığını azaltır. Çok küçük (düşük KB boyutlu) yer tutucu görseller veya hatta sonunda yüklenecek olan görselin ortalama rengiyle eşleşen düz renk blokları kullanın.
• Görselleri Optimize Edin: Lazy loading uygulamadan önce, görsellerinizi sıkıştırarak ve uygun dosya formatlarını (örneğin, WebP, JPEG, PNG) kullanarak optimize edin.
• Kapsamlı Bir Şekilde Test Edin: Lazy loading uygulamanızın doğru çalıştığından emin olmak için farklı tarayıcılar, cihazlar ve ağ koşullarında test edin. Görsellerin yüklenmesinin çok uzun sürmediğinden emin olmak için düşük kaliteli cihazlardaki (genellikle eski telefonlar) kullanıcılara dikkat edin.
• Sayfanın Üst Kısmını Göz Önünde Bulundurun: Sayfanın üst kısmındaki (ilk sayfa yüklemesinde görünen) öğeler için lazy loading'den kaçının. Hızlı bir ilk render sağlamak için bu öğeler hevesle yüklenmelidir.
• Kritik Kaynaklara Öncelik Verin: İlk kullanıcı deneyimi için gerekli olan kritik kaynakları belirleyin ve bunları hevesle yükleyin. Bu, web sitesi logosunu, gezinme öğelerini ve sayfanın ana içeriğini içerebilir.
• Performansı İzleyin: Lazy loading'in web sitenizin performansı üzerindeki etkisini izlemek için performans izleme araçlarını kullanın. Bu, herhangi bir sorunu belirlemenize ve uygulamanızı optimize etmenize yardımcı olacaktır. Google'ın PageSpeed Insights ve WebPageTest'i, site performansını ölçmek için harika ücretsiz araçlardır.

Uluslararasılaştırma Hususları

Küresel bir kitle için lazy loading uygularken, bu uluslararasılaştırma faktörlerini göz önünde bulundurun:

• Değişken Ağ Hızları: Farklı bölgelerdeki kullanıcılar önemli ölçüde farklı ağ hızlarına sahip olabilir. Daha yavaş bağlantıları hesaba katmak için lazy loading stratejinizi optimize edin.
• Veri Maliyetleri: Bazı bölgelerde veri maliyetleri yüksektir. Lazy loading, veri tüketimini azaltmaya ve sınırlı veri planlarına sahip kullanıcılar için kullanıcı deneyimini iyileştirmeye yardımcı olabilir.
• Cihaz Yetenekleri: Farklı bölgelerdeki kullanıcılar, değişen yeteneklere sahip farklı cihazlar kullanabilir. Doğru çalıştığından emin olmak için lazy loading uygulamanızı çeşitli cihazlarda test edin.
• İçerik Dağıtım Ağları (CDN'ler): Web sitenizin varlıklarını dünya çapında bulunan sunuculardan dağıtmak için bir CDN kullanın. Bu, farklı bölgelerdeki kullanıcılar için performansı artırabilir. Örneğin, Avrupa'daki önemli yerlerin görselleri, mümkün olduğunda AB kullanıcıları için Avrupa'daki bir CDN uç noktasından sunulmalıdır.
• Görsel Formatları: JPEG ve PNG gibi geleneksel formatlardan daha iyi sıkıştırma ve kalite sunan WebP gibi modern görsel formatlarını kullanmayı düşünün. Ancak, tarayıcı uyumluluğunun farkında olun; WebP'yi desteklemeyen eski tarayıcılar için uygun geri dönüşler kullanın.
• Erişilebilirlik: Lazy loading uygulamanızın engelli kullanıcılar için erişilebilir olduğundan emin olun. Görseller için uygun alt metin sağlayın ve yükleme durumunun yardımcı teknolojilere iletildiğinden emin olun.

Sonuç

Lazy loading, web sitesi performansını optimize etmek ve kullanıcı deneyimini iyileştirmek için güçlü bir tekniktir. Ekran dışı kaynakların yüklenmesini erteleyerek, ilk sayfa yükleme süresini azaltabilir, bant genişliği tüketimini düşürebilir ve sunucu yükünü azaltabilirsiniz. İster küçük bir kişisel web sitesi ister büyük bir kurumsal uygulama oluşturuyor olun, lazy loading performans optimizasyon stratejinizin önemli bir parçası olmalıdır. Bu makalede özetlenen en iyi uygulamaları takip ederek ve uluslararasılaştırma faktörlerini göz önünde bulundurarak, lazy loading uygulamanızın etkili olmasını ve küresel bir kitle için olumlu bir kullanıcı deneyimi sunmasını sağlayabilirsiniz.

Lazy loading'i benimseyin ve herkes için daha hızlı, daha verimli ve kullanıcı dostu bir web deneyiminin kilidini açın.